<template>
    <div class="container yuan-container patient-container">

        <a-card title="患者信息管理">
            <div class="filter-panel">
                <div class="filter-list">
                    <a-input-search allowClear v-model="pageParams.keyword" placeholder="患者姓名、诊号、手机号、就诊门店" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>来源：</span>
                    <a-select v-model="pageParams.source" @change="resetList" allowClear placeholder="患者来源">
                        <a-select-option value="门诊">门诊</a-select-option>
                        <a-select-option value="小程序">小程序</a-select-option>
                        <a-select-option value="挂号预约">挂号预约</a-select-option>
                        <a-select-option value="零售">零售</a-select-option>
                    </a-select>
                </div>

                <div style="float:right" class="filter-list" v-if="userType==='ORGAN' && $checkPer(['patientImport'])" >
                    <a-upload name="file" :multiple="false" :beforeUpload="beforeUpload" :showUploadList="false">
                        <a-button type="primary" style="margin-left: 5px;">导入</a-button>
                    </a-upload>
                </div>

            </div>
            <div class="use-total-box">
                <div class="use-total-list">
                    <div class="use-total-num">{{userTotal}}</div>
                    <div class="use-total-title">就诊人数</div>
                </div>
                <div class="use-total-list">
                    <div class="use-total-num">{{$toYuan(moneyTotal)}}</div>
                    <div class="use-total-title">累计消费金额</div>
                </div>
            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id+'_'+i" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div v-if="$checkPer(['patientDetailQuery'])">
                            <a-button type="primary" @click="clickShow(record)">查看</a-button>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo" @resetList="resetList"
            :isShow="isShow" />
    </div>
</template>
<script lang="ts">
import platformApi from "@/api/platformApi";
import { getStorageUserInfo, toYuan } from "@/utils";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./detail.vue";
@Component({
    name: "tpl",
    components: { DetailVue },
})
export default class extends Vue {
    loading = false;
    expandedRowKeys: any[] = [];
    pageList: any[] = [];
    pageParams = {
        keyword: "",
    };
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "source",
            key: "source",
            title: "来源",
        },
        {
            align: "center",
            dataIndex: "consultationDate",
            key: "consultationDate",
            title: "就诊门店",
        },
        {
            align: "center",
            dataIndex: "consultationNumber",
            key: "consultationNumber",
            title: "诊号",
        },
        {
            align: "center",
            dataIndex: "patientName",
            key: "patientName",
            title: "患者姓名",
        },
        {
            align: "center",
            dataIndex: "gender",
            key: "gender",
            title: "性别",
        },
        {
            align: "center",
            dataIndex: "age",
            key: "age",
            title: "年龄",
        },
        {
            align: "center",
            dataIndex: "phone",
            key: "phone",
            title: "手机号",
        },
        {
            align: "center",
            dataIndex: "department",
            key: "department",
            title: "科室",
        },
        {
            align: "center",
            dataIndex: "diagnosisResult",
            key: "diagnosisResult",
            title: "诊断结果",
        },
        {
            align: "center",
            dataIndex: "visitCount",
            key: "visitCount",
            title: "就诊次数",
        },
        {
            align: "center",
            dataIndex: "lastVisitTime",
            key: "lastVisitTime",
            title: "最近就诊时间",
        },
        {
            align: "center",
            dataIndex: "userConsumptionCents",
            key: "userConsumptionCents",
            title: "累计消费金额",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.userConsumptionCents);
            },
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 180,
            scopedSlots: { customRender: "action" },
        },
    ];
    userTotal=0
    moneyTotal=0
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await platformApi.getPatientPage({
                ...this.pageParams,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
            });
            const data = res.data?.voS || {};
            this.pageList = data.rows || [];
            this.pagination.total = data.total || 0;
            this.userTotal=res.data.clinicCount ||0
            this.moneyTotal=res.data.totalConsumptionCents ||0
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    userType = "";
    async mounted() {
        const userInfo = getStorageUserInfo();
        this.userType = userInfo.type;
        this.getList();
    }
    editInfo = {};
    detailVisible = false;
    isShow = false;

    clickEdit(item) {
        this.isShow = false;
        this.editInfo = item;
        this.detailVisible = true;
    }
    async clickShow(item) {
        this.loading = true;
        try {
            const res = await platformApi.getPatientDetail(item.id);
            this.isShow = true;
            this.editInfo = res.data;
            this.detailVisible = true;
        } finally {
            this.loading = false;
        }
    }

    async beforeUpload(file: any) {
        let formData = new FormData();
        formData.append("file", file);
        this.loading = true;
        try {
            const res = await platformApi.importPatientDataByName(formData);
            this.$message.success(res.msg);
            this.resetList();
        } finally {
            this.loading = false;
        }
    }
}
</script>
<style scoped lang="scss">
.patient-container {
    .use-total-box {
        
        margin: 15px 0;
    }
    .use-total-list {
        display: inline-block;
        background-color: rgba(240, 244, 247, 1);
        width: 19%;
        border-radius: 5px;
        text-align: center;
        padding: 10px 0;
        margin-right: 20px;
    }
    .use-total-num {
        font-weight: bold;
        font-size: 22px;
        color: #222222;
    }
    .use-total-title {
        font-size: 14px;
        color: #6d6d6d;
    }
}
</style>
